<template>
  <el-input-tag v-model="value" placeholder="请输入类名">
    <template #suffix>
      <el-icon @click="openTemplate"><Search /></el-icon>
    </template>
  </el-input-tag>
</template>

<script lang="ts" setup>
  import { ElInputTag, ElIcon } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import { ref, watch, watchEffect } from 'vue';
  import { open } from '@/components/Popup';
  import ClassTemplate from './ClassTemplate.vue';

  const props = defineProps<{modelValue?: string[]}>()
  const emits = defineEmits(['update:modelValue'])

  const value = ref<string[] | undefined>(props.modelValue || [])

  watchEffect(() => emits('update:modelValue', value.value))
  watch(() => props.modelValue, (val) => value.value = val)

  function openTemplate() {
    open({ title: '选择模板' }, ClassTemplate, { onChoose } )
  }

  function onChoose(k) {
    if(!value.value) value.value = []
    value.value.push(k)
  }
</script>
